<template>
	<view class="popapp">
		<view class="main techinfo">
			<view class="tab">
				<view class="item" :class="tabs.current==index?'active':''" v-for="(item,index) in tabs.list" @click.stop="changeTab(index)">{{item}}</view>
			</view>
			
			<swiper
			    class="swiper"
			    :current="tabs.current"
			    circular
			    @animationfinish="animationfinish"
			>
				<swiper-item>
					<view class="status-content">
						<view class="tech-status">
							<view>认证状态:</view>
							<radio-group @change="setStatusVal" class="type flex justify-between items-center">
							      <label v-for="(item, index) in status.data" :key="index">
										<radio class="radio" :value="index" :checked="status.current==index" />
										{{item}}
							      </label>
							</radio-group>
						</view>
						
						<view class="tech-status">
							<view>工作状态:</view>
							<radio-group @change="setWorkStatusVal" class="type flex justify-between items-center">
							      <label v-for="(item, index) in work_status.data">
										<radio class="radio" :value="index" :checked="work_status.current==index" />
										{{item}}
							      </label>
							</radio-group>
							<view class="ipt" v-if="work_status.current == '2'"><textarea placeholder="请输入原因" v-model="mask" placeholder-class="ipt2" /></view>
						</view>
						
						<view class="flex justify-center items-center btn">
							<view @click.stop="setStatus()">确认设置</view>
							<view @click.stop="hidePop()">取消</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<scroll-view
					    style="height: 100%"
					    scroll-y="true"
					    :scroll-with-animation="true"
					>
					    <uni-list-item
							class="itemaaaaa"
					        v-for="item in workStatusList"
					        :key="item.id"
					        :title="item.events"
									:rightText="item.control_user"
					        :note="totime(item.intime * 1000)"
					    >
							<template v-slot:header></template>  
						</uni-list-item>
						<view class="empty" v-if="!workStatusList.length">
							<image mode="aspectFit" src="/static/empty.png"></image>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="status-content" style="padding-bottom: 35px;">
						<scroll-view
						  style="height: 100%"
						  scroll-y="true"
						  :scroll-with-animation="true"
						>
						  <uni-list-item
						    v-for="item in list"
						    :key="item.id"
						    :title="item.address"
						    :note="totime(item.create_time * 1000)"
						  />
						  <view class="empty" v-if="!list.length">
						  	<image mode="aspectFit" src="/static/empty.png"></image>
						  </view>
						</scroll-view>
						    
						<view class="pagina">
							<wyb-pagination :total-items="pageInfo.total" :page-items="pageInfo.per_page" :current="pageInfo.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>


<script>
	var that=null,App,AppData,Comm;
	
	export default{
		name:"techinfo",
		props:{
			id:{
				type:Number,
				default:''
			}
		},
		data(){
			return {
				tabs:{
					list:['设置状态','状态修改记录','签到记录'],
					current:0
				},
				info:{},
				workStatusList: [],
				list: [],
				pageInfo: {
					current_page: 1,
					last_page: 0,
					total: 0,
					per_page: 0
				},
				status:{
					current:0,
					data:{
						0:'未认证',1:'认证',2:'解约',3:'注销',4:'认证中',5:'认证失败'	
					}
				},
				mask: '',
				coypWorkStatus: 0,
				work_status:{
					current:0,
					data:{
						0:'休息',1:'工作',2:'禁用',3:'下线'
					}
				},
			};
		},
		created() {
			that=this,App=getApp(),AppData=getApp().globalData,Comm=getApp().comm;
			console.log('created');
		},
		mounted() {
			console.log('page mounted');
			this.loadInfo();
		},
		destroyed() {
			console.log('page destroyed');
		},
		methods:{
			statusText(val){
			    if (val === 0) {
			      return '休息'
			    } else if (val === 1) {
			      return '工作'
			    } else if (val === 2) {
			      return '禁用'
			    } else {
			      return '下线'
			    }
			},
			loadlist(val){
				this.pageInfo.current_page = val.current
				this.getPoslist()
			},
			animationfinish(e){
				this.tabs.current = e.detail.current
				if(this.tabs.current === 1){
					this.getWorkstatus()
				}else if(this.tabs.current === 2){
					this.getPoslist()
				}
			},
			changeTab(index){
				this.tabs.current = index
			},
			hidePop(action){
				this.$emit('closePop',false);
			},
			loadInfo(){
				const id=this.id;
				Comm.http('/api/service/techinfo',{id},'POST').then(res=>{
					if(res.code==1){
						that.info=res.data;
						that.status.current=res.data.status;
						that.work_status.current=res.data.work_status;
						that.coypWorkStatus = res.data.work_status;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
				});
			},
			getWorkstatus(){
				Comm.http('/api/service/get_workstatus_log',{ techid:this.id },'POST').then(res=>{
					this.workStatusList = res.data
				});
			},
			getPoslist(){
				Comm.http('/api/service/poslist',{id:this.id,page: this.pageInfo.current_page},'POST').then(res=>{
					this.list = res.data.data
					this.pageInfo.current_page = res.data.current_page
					this.pageInfo.last_page = res.data.last_page
					this.pageInfo.total = res.data.total
					this.pageInfo.per_page = res.data.per_page
				});
			},
			setStatusVal(e){
				this.status.current=e.detail.value;
			},
			setWorkStatusVal(e){
				this.work_status.current=e.detail.value;
			},
			setStatus(){
				const params = {
					id:this.id,
					status:this.status.current,
					work_status:this.work_status.current
				}
				if(that.coypWorkStatus === params.work_status){
					uni.showToast({
					    title: '已经是禁用状态！',
					    icon: 'none',
					    duration: 2000
					    })
					return
				}
				if(this.work_status.current === '2' && !this.mask){
					uni.showToast({
					    title: '请说明原因',
					    icon: 'none',
					    duration: 2000
					    })
					return
				}else if(this.work_status.current === '2' && this.mask){
				   params.mask = this.mask
				}
				// console.log(params);
				Comm.http('/api/service/settechstatus',params,'POST').then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					});
					this.mask = ''
					setTimeout(()=>{
						this.$emit('closePop',true);
					},500);
				});
			},
			copy(txt){
				Comm.copy(txt);
			},
			showpic(url,i){
				uni.previewImage({
					urls:url,
					current:i
				})
			},
			totime(timespan){
			  // 把时间戳转换成时间字符串 yyyy-MM-dd HH:mm:ss
			  const date = new Date(timespan);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			  return formattedTime;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.popapp{
	background-color: #fff;
}
.main{
	margin: 0 auto;
	padding: 8px 8px;
	max-width: 600px;
}
.swiper{
	height: 800rpx;
}
.status-content{
	height: 100%;
	box-sizing: border-box;
	padding-top: 20px;
	position: relative;
}
.empty{
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab{
	display: flex;
	justify-content: space-around;
	.item{
		line-height: 25px;
		flex: 1;
		text-align: center;
	}
	.active{
		border-bottom: 2px solid #ffaa00; font-weight: bold;
	}
}

.tech-status{
	
	.type{
		align-items: center;  flex-wrap: wrap; 
	}
	.type>label{
		margin: 8px 0;
	}

	.type .radio{
		transform:scale(0.8);
	}
}
.techinfo{
	.btn{
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 2px solid #f0f0f0;
	}
	.btn>view{
		height: 45px; line-height: 45px; flex: 1; text-align: center; font-size: 14px;
	}
	.tech-status:nth-child(1){
		border-bottom: 1px solid #f0f0f0; margin-bottom: 16px;
	}
	.btn>view:nth-child(2){
		border-left: 1px solid #f0f0f0;
	}
}
.pagina{
	background-color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 35px;
}

.ipt{
	flex: 1;
	margin: 0 8px;
				background-color: #f5f5f5;
				border-radius: 5px;
				padding: 0px 16px;
				border-bottom: 1px solid #cdcdcd;
			}
			.ipt>input{
				height: 35px;
			}
</style>